<template>
    <div class="p-add-class">
        <page-title>添加音频分类</page-title>
        <div class="main"> 
            <div class="main-box">
                <div class="group">
                    <span class="name text-right">分类标题：</span>
                    <el-input v-model="form.title" placeholder="请输入标题名称"></el-input>
                </div>
                <div class="group">
                    <span class="name text-right">权限设置：</span>  
                    <el-switch v-model="form.level_three" active-text="高级会员可看"></el-switch> 
                    <el-switch v-model="form.level_two" active-text="初级会员可看"></el-switch> 
                    <el-switch v-model="form.level_one" active-text="游客登录可看 "></el-switch> 
                </div>
                <div class="group text-center btn">
                     <el-button type="primary" @click="postData">确定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as api from './../../../api/api'
export default {
    data() {
        return{ 
            form:{
                title:'',
                level_three:true, //高级会员可看
                level_two:true, //初级会员可看
                level_one:true, //游客登录可看
            }
        }
    },  
    methods: {
        postData(){
            let vm = this;
            if(vm.form.title){
                if(vm.$route.query.preTabId){
                    vm.updatedData(JSON.parse(vm.$route.query.preTabId).tab_id)
                }else{
                    vm.ceratedData();
                }
            }else{
                vm.$message({ message:"标题不能为空" }); 
            } 
        },
        updatedData(val) {
            let vm = this;
            let body={
                model:'Tabs', 
                update_condition:{ 
                    tab_id:val, 
                }, 
                data:{
                    title:vm.form.title,  
                    level_three:vm.form.level_three?1:0,
                    level_two:vm.form.level_two?1:0,
                    level_one:vm.form.level_one?1:0,  
                },  
            };
            api.createData(body).then(res=>{
                if(res.data.code==200){
                    vm.$message({
                        message:"添加数据成功！",
                        type:'success'
                    }); 
                    vm.$router.push({name:'voiceClassList'});
                }
            });
        },
        ceratedData(){
            let vm = this;
            let body={
                model:'Tabs', 
                data:{
                    title:vm.form.title,  
                    level_three:vm.form.level_three?1:0,
                    level_two:vm.form.level_two?1:0,
                    level_one:vm.form.level_one?1:0, 
                    type:1,
                    resource_type:2 //音视频
                } 
            };
            api.createData(body).then(res=>{
                if(res.data.code==200){
                    vm.$message({
                        message:"添加数据成功！",
                        type:'success'
                    }); 
                    vm.$router.push({name:'voiceClassList'});
                }
            });
        },
    }, 
    beforeRouteEnter:function(to,from,next) {    //路由生命周期
        next(vm => { 
            if(vm.$route.query.preTabId){
                vm.form={
                    title:JSON.parse(vm.$route.query.preTabId).title,
                    level_three:JSON.parse(vm.$route.query.preTabId).level_three==1?true:false, //高级会员可看
                    level_two:JSON.parse(vm.$route.query.preTabId).level_two==1?true:false, //初级会员可看
                    level_one:JSON.parse(vm.$route.query.preTabId).level_one==1?true:false, //游客登录可看
                }
            } 
        })
    },
}
</script>

<style lang="scss" scoped>
.p-add-class {
    height:100%;  
    .main{
        padding: 10px 50px; 
        background:#fff;
        .main-box{
            width:70%;
            margin:auto; 
            .group{
                width:100%;
                margin:30px 0;
                .name{
                    display:inline-block;
                    width:110px;
                }
                .el-input{
                    width:300px; 
                }
            }
            .btn{
                padding-top:20px;
            }
        }
    }  
}
</style>
